<template>
	<view class="box">

		<view class="head flex-no-horizontal">

			<view class="head-right flex-no-horizontal" @click="toUserInfo">
				<view class="head-right-icon">
					<image src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="head-right-name-time">
					<view class="name flex-no-horizontal">
						飞翔的大菠萝
						<image src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="time">
						5月3日
					</view>
				</view>
			</view>

			<view class="head-left flex-no-horizontal" @click="followClick" v-if="ifShowFollow">

				<view class="head-left-content flex-no-horizontal" v-if="!ifFollow">
					<u-icon name="plus" color="#2979ff" size="18"></u-icon>
					<view>关注</view>
				</view>

				<view class="head-left-content-succ flex-no-horizontal" v-else>
					<view>已关注</view>
				</view>

			</view>

		</view>

		<view class="content-text" @click="toDynamicDetail">
			轻松小镇内测发行的首款数字藏品，主要用于扩大轻松小镇现有用户共治社区。轻松小镇内测发行的首款数字藏品，主要用于扩大轻松小镇现有用户共治社区。轻松小镇内测发行的首款数字藏品，主要用于扩大轻松小镇现有用户共治社区。
		</view>

		<!-- 接数据时，改掉判断条件即可 -->
		<view class="main-img-single" :class="{'main-img-multiple':false}">

			<image src="../../../static/logo.png" mode=""></image>

		</view>

		<view class="bottom-icon flex-no-horizontal">

			<view class="popup-select" v-show="ifChooseMore">
				<view class="flex-no-horizontal">分享</view>
				<view class="flex-no-horizontal">举报</view>
				<view class="flex-no-horizontal" @click="ifChooseMore = false">取消</view>
			</view>

			<view class="bottom-icon-item flex-no-horizontal" @click="ifChooseMore = true">
				<u-icon name="more-dot-fill" color="#F0F0F0" size="36"></u-icon>
			</view>
			<view class="bottom-icon-item flex-no-horizontal" @click="toDynamicDetail">
				<u-icon name="chat" color="#F0F0F0" size="36"></u-icon>
				12
			</view>
			<view class="bottom-icon-item flex-no-horizontal" @click="likeClick">
				<u-icon name="thumb-up" :color=" ifLike ? 'rgba(74, 188, 90, 1)' :'#F0F0F0'" size="36"></u-icon>
				23
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			ifShowFollow: {		//是否显示关注
				type: Boolean,
				default () {
					return true;
				}
			},
		},
		data() {
			return {
				ifFollow: false, //是否关注
				ifChooseMore: false, //操作更多
				ifLike: false //点赞
			};
		},
		computed: {

		},
		onLoad() {

		},
		methods: {
			//关注点击
			followClick() {
				this.ifFollow = !this.ifFollow
			},

			//跳转动态详情
			toDynamicDetail() {
				uni.navigateTo({
					url: '../community/dynamicDetail'
				})
			},

			//点赞点击
			likeClick() {

				if (this.ifLike) {
					this.ifLike = !this.ifLike
				} else {
					this.ifLike = !this.ifLike
				}

			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		margin-bottom: 40rpx;

		.head {
			justify-content: space-between;

			.head-right {

				.head-right-icon {
					width: 80rpx;
					height: 64rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: $uni-border-radius-circle;
					}
				}

				.head-right-name-time {

					.name {
						justify-content: space-between;
						font-size: $uni-font-size-lg;
						color: $uni-color-black;
						margin-bottom: 10rpx;

						image {
							margin-left: 18rpx;
							width: 34rpx;
							height: 34rpx;
							border-radius: $uni-border-radius-circle;
						}

					}

					.time {
						font-size: 22rpx;
						color: rgba(143, 144, 145, 1);
					}

				}

			}

			.head-left {
				justify-content: flex-end;

				.head-left-content {
					justify-content: space-around;
					width: 145rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 2rpx solid rgba(51, 51, 51, 1);

					view {
						color: #333333;
						font-size: 22rpx;
					}

				}

				.head-left-content-succ {
					justify-content: center;
					width: 145rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background-color: rgba(247, 247, 247, 1);

					view {
						color: rgba(178, 180, 181, 1);
						font-size: 22rpx;
					}

				}

			}

		}

		.content-text {
			padding-left: 99rpx;
			margin: 40rpx 0;
			color: $uni-color-black;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.main-img-single {
			margin-left: 99rpx;
			height: 571rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.main-img-multiple {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: left;
			flex-wrap: wrap;

			image {
				width: 33%;
				height: 189rpx;
				margin-left: 0.33%;
				margin-bottom: 20rpx;
			}

		}

		.bottom-icon {
			margin: 20rpx 0 0 99rpx;
			justify-content: space-between;
			position: relative;

			.popup-select {
				width: 266rpx;
				height: 277rpx;
				background-color: #FFFFFF;
				position: absolute;
				top: -280rpx;

				view {
					height: 86rpx;
					padding: 0 20rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					justify-content: center;
					border-bottom: 2rpx solid #f0f0f0;

				}

			}

			.bottom-icon-item {
				justify-content: center;
				font-size: 24rpx;
				color: rgba(179, 180, 181, 1);
			}
		}

	}
</style>
